<template>
  <!-- 需要引入mixin,loadingOption -->
  <div
    v-loading="pageLoading"
    :element-loading-text="loadingOption.text"
    :element-loading-spinner="loadingOption.spinner"
    :element-loading-background="loadingOption.background"
    class="orderDetail_main"
  >
    <!-- 进度条 -->
    <div class="step_main">
      <el-steps :active="step">
        <el-step
          v-for="item in stepList"
          :key="item.name"
          :title="item.name"
          :description="item.time ? item.time : ''"
        />
      </el-steps>
    </div>
    <el-card shadow="never" class="card">
      <div slot="header">
        <el-tag
          v-if="status === 0"
          type="danger"
          size="normal"
          effect="dark"
        >当前订单状态:待付款</el-tag>
        <el-tag
          v-else-if="status === 1"
          type="warning"
          effect="dark"
        >当前订单状态:待发货</el-tag>
        <el-tag v-else-if="status === 2">当前订单状态:已发货</el-tag>
        <el-tag
          v-else-if="status === 3"
          effect="dark"
        >当前订单状态:已完成</el-tag>
        <el-tag
          v-else-if="status === 4"
          type="info"
          effect="dark"
        >当前订单状态:已关闭</el-tag>
        <el-tag v-else type="info">当前订单状态:无效订单</el-tag>
      </div>
      <!-- card body -->
      <!-- 商品信息 -->
      <div class="table-main">
        <div class="table-title">订单信息:</div>
        <TableComponent
          :table-data="orderTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        />
      </div>
      <!-- 收货人信息 -->
      <div class="table-main">
        <div class="table-title">收货人信息:</div>
        <TableComponent
          :table-data="userTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        />
      </div>

      <div class="table-main">
        <div class="table-title">商品信息:</div>
        <el-table style="margin-top: 30px" :data="orderItemList">
          <el-table-column type="index" label="#" fixed="left" />
          <el-table-column
            prop="productName"
            label="商品名称"
            width="250px"
            align="center"
          />
          <el-table-column
            prop="productName"
            label="商品图片"
            width="200px"
            align="center"
          >
            <template slot-scope="scope">
              <img
                style="width: 100px; height: 100px"
                :src="scope.row.productPic"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="productSn"
            label="商品编号"
            width="200px"
            align="center"
          />
          <el-table-column
            prop="productBrand"
            label="品牌"
            width="200px"
            align="center"
          />
          <el-table-column
            prop="productPrice"
            label="价格"
            width="200px"
            align="center"
          />
          <el-table-column
            prop="productQuantity"
            label="商品数量"
            width="200px"
            align="center"
          />
          <el-table-column
            prop="isReturn"
            label="是否退货"
            width="250px"
            align="center"
          />
          <el-table-column
            fixed="right"
            prop="totalPrice"
            label="小计"
            width="250px"
            align="center"
          />
        </el-table>
      </div>
      <!-- 费用信息 -->
      <div style="margin-top: 20px" class="table-main">
        <div class="table-title">费用信息:</div>
        <TableComponent
          :table-data="costData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        />
      </div>
    </el-card>
    <div class="button_main">
      <!-- v-if="step===1" -->
      <el-button
        v-if="status === 1"
        type="primary"
        style="width: 150px"
        size="small"
        @click="sendOrder"
      >确认发货</el-button>
      <el-button
        v-if="status === 3"
        type="primary"
        style="width: 150px"
        size="small"
        @click="finishOrder"
      >关闭订单</el-button>
      <!-- <el-button type="primary" size="default" ></el-button> -->
    </div>
  </div>
</template>

<script>
import orderApi from '@/api/order/index'
// import tableComponent from '@/components/tableComponent/index'
import mixin from '@/mixins/index'
export default {
    name: 'OrederList',
    // components: { tableComponent },
    mixins: [mixin],
    data() {
        return {
            pageLoading: true,
            statusTrans: {
                0: '待付款',
                1: '待发货',
                2: '已发货',
                3: '已完成',
                4: '已关闭'
            },
            id: '',
            status: 0, // 当前状态
            stepList: [
                { name: '待付款' },
                { name: '待发货' },
                { name: '已发货' },
                { name: '已完成' },
                { name: '已关闭' }
            ],
            orderBaseObj: {},
            orderTableData: [], // 基本信息 mail-table  订单信息
            userTableData: [], // 基本信息 mail-table  收货人信息
            costData: [], // 基本信息 mail-table  收货人信息
            orderItemList: [] // 商品列表
            // orderTableData: [
            //     { key: '单号', value: '1001' },
            //     { key: '商品名称', value: '篮球' },
            //     { key: '价格', value: '120.00' },
            //     { key: '订单日期', value: '2017-03-01' },
            //     { key: '付款方式', value: '在线支付' },
            //     { key: '收货地址', value: '北京市海淀区西北旺镇' },
            //     { key: '收货地址', value: '北京市海淀区西北旺镇' },
            //     { key: '收货地址', value: '北京市海淀区西北旺镇' }
            // ],
        }
    },
    computed: {
        step() {
            return this.status + 1
        }
    },
    created() {
        this.id = this.$route.params.id
        this.getOrderDetail()
    // orderApi.sendOrder().then(res => {console.log(res)})
    },
    methods: {
    // 确认订单窗口
        sendOrder() {
            orderApi
                .sendOrder({
                    orderId: this.id,
                    deliverySn: this.detailObj.deliverySn,
                    deliveryCompany: this.detailObj.deliveryCompany
                })
                .then((res) => {
                    if (res.success) {
                        window.location.reload()
                        console.log(res)
                    } else {
                        this.$message.error('确定订单失败')
                    }
                })
                .catch((res) => {
                    this.$message.error('确认订单失败')
                })
        },
        // 关闭订单窗口
        finishOrder() {
            orderApi
                .finishOrder(
                    this.id
                )
                .then((res) => {
                    if (res.success) {
                        window.location.reload()

                        console.log(res)
                    } else {
                        this.$message.error('关闭订单失败')
                    }
                })
                .catch((res) => {
                    this.$message.error('关闭订单失败')
                })
        },

        // 获取详情
        getOrderDetail() {
            // orderApi.orderDetail(this.id).then((res) => {
            orderApi.orderDetail(this.id).then((res) => {
                if (res.success) {
                    this.detailObj = res.data.orderDetail.orderBase
                    this.orderItemList = res.data.orderDetail.orderItems
                    // 初始化订单信息
                    this.initOrderObj()
                    // 初始化用户信息
                    this.initUserObj()
                    // 初始化进度条信息
                    this.initStepList()
                    // 初始化费用信息
                    this.initCostObj()
                } else {
                    this.$message.error('获取数据失败')
                }
                this.pageLoading = false
            })
        },
        // 初始化订单Obj
        initOrderObj() {
            const orderObj = {
                订单编号: this.detailObj.orderSn,
                用户账号: this.detailObj.memberUsername,
                订单金额: this.detailObj.totalAmount,
                订单类型: this.detailObj.orderType === 1 ? '秒杀订单' : '正常订单',
                订单状态: this.statusTrans[this.detailObj.status],
                下单时间: this.detailObj.createTime,
                付款时间: this.detailObj.paymentTime,
                发货时间: this.detailObj.deliveryTime,
                收货时间: this.detailObj.receiveTime,
                备注: this.detailObj.totalAmount
            }
            // orderTableData
            for (const key in orderObj) {
                this.orderTableData.push({
                    key: key,
                    value: orderObj[key]
                })
            }
        },
        initUserObj() {
            const userObj = {
                用户姓名: this.detailObj.memberUsername,
                收货人: this.detailObj.receiverName,
                手机号码: this.detailObj.receiverPhone,
                邮政编码: this.detailObj.receiverPostCode,
                地市: this.detailObj.receiverProvince + ' ' + this.detailObj.receiverCity,
                详细地址: this.detailObj.receiverDetailAddress
            }
            for (const key in userObj) {
                this.userTableData.push({
                    key: key,
                    value: userObj[key]
                })
            }
        },
        initCostObj() {
            const costObj = {
                运费金额: this.detailObj.freightAmount,
                订单总金额: this.detailObj.totalAmount,
                实际金额: this.detailObj.payAmount,
                促销优化金额: this.detailObj.promotionAmount
            }
            for (const key in costObj) {
                this.costData.push({
                    key: key,
                    value: costObj[key]
                })
            }
        },

        // 初始化进度条信息
        initStepList() {
            this.stepList[0].time = this.detailObj.createTime
            this.stepList[1].time = this.detailObj.paymentTime
            this.stepList[2].time = this.detailObj.deliveryTime
            this.stepList[3].time = this.detailObj.receiveTime
            this.stepList[4].time = this.detailObj.finishTime
            this.status = this.detailObj.status
        }
    }
}
</script>

<style lang="scss" scoped>
.orderDetail_main {
  min-height: 900px;
  .step_main {
    margin: 30px auto;
    width: 80%;
  }
  .card {

    margin: 30px;
  }
  .table-main {
    .table-title {
      font-size: 20px;
    }
  }
  .button_main {
    margin: 40px auto;
    display: flex;
    width: 100%;
    justify-content: center;
  }
}
</style>

